<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <el-radio-group 
          class="filter-item" 
          v-model="query.flag" 
          @change="crud.toQuery"
        >
          <template v-for="item in flagList">
            <el-radio-button 
              :key="item.id" 
              :label="item.id"
            >
            {{item.text}}
            </el-radio-button>
          </template>
        </el-radio-group>
        <el-select
          v-model='query.drugType'
          clearable
          size='small'
          placeholder='物品分类'
          class='filter-item'
          style='width: 120px'
          @change="crud.toQuery"
        >
          <template v-for='item in drugTypes'>
            <el-option
              v-if="item.id > 1"
              :key='item.id'
              :label='item.text'
              :value='item.id'
            />
          </template>
        </el-select>
        <el-input
          v-model="query.drugName"
          placeholder="药品名称/拼音首字母"
          size='small'
          class="filter-item"
          style="width: 160px"
        />
        <rrOperation :crud="crud" />
      </div>
      <crudOperation :permissions="permission" />
    </div>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading" 
      :data="crud.data"
      @selection-change="crud.selectionChangeHandler"
      @sort-change="crud.sortChange"
    >
      <el-table-column v-if="columns.visible('drugName')" label="商品名称" prop="drugName"></el-table-column>
      <el-table-column v-if="columns.visible('drugNo')" label="库位号" prop="drugNo"></el-table-column>
      <el-table-column v-if="columns.visible('drugManufactor')" label="生产厂家" prop="drugManufactor"></el-table-column>
      <el-table-column v-if="columns.visible('drugSpec')" label="规格" prop="drugSpec"></el-table-column>
      <el-table-column v-if="columns.visible('wareHousingType')" label="入库方式" prop="wareHousingType">
        <template v-slot="slot">
          <housingType :wareHousingType="slot.row.wareHousingType"></housingType>
        </template>
      </el-table-column>
      <el-table-column v-if="columns.visible('batchNo')" label="批号" prop="batchNo">
        <template slot-scope="scope">
          <columnClickEdit
            :permission="['admin','remain:update']"
            :row="scope.row" 
            :value="scope.row.batchNo"
            @change="onChangeNo"
          />
        </template>
      </el-table-column>
      <el-table-column v-if="columns.visible('termOfValidity')" label="有效期" prop="termOfValidity" sortable="custom">
        <template slot-scope="scope">
          <columnClickEdit
            :permission="['admin','remain:update']"
            :value="scope.row.termOfValidity"
            @change="onChangeTerm"
            :row="scope.row"
            dataType="date"
          >
            <termOfValidity :value="scope.row.termOfValidity"></termOfValidity>
          </columnClickEdit>
        </template>
      </el-table-column>
      <el-table-column v-if="columns.visible('leftCount')" label="剩余数量" prop="leftCount"></el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import CRUD, { presenter, header } from '@crud/crud';
import rrOperation from '@crud/RR.operation';
import crudOperation from '@crud/CRUD.operation';
import pagination from '@crud/Pagination';
import housingType from '@/views/storageRoom/drugWareHousing/module/housingType';
import {downloadTermDrug, update} from '@/api/storageRoom/drugRemain';
import columnClickEdit from '@/components/ColumnClickEdit';
import termOfValidity from './module/termOfValidity';
import { mapGetters } from 'vuex';

let defaultCrud = CRUD({
  title: '有效期提醒',
  url: 'drugremain/getList',
  query: {drugName: null, drugType: null, flag: 1, pharmacyId: null}
});

export default {
  name: "drugRemain",
  components: { crudOperation, rrOperation, pagination, housingType, columnClickEdit, termOfValidity },
  mixins: [presenter(defaultCrud), header()],
  data() {
    return {
      flagList: [
        {id: 1, text: '已过期'},
        {id: 3, text: '一周内'},
        {id: 2, text: '一个月内'},
        {id: 4, text: '三个月内'},
        {id: 5, text: '半年内'},
        {id: 6, text: '一年内'}
      ],
      permission: [
        {
          type: "download",
          name: "导出",
          position: 1,
          handleClick: "onImport"
        }
      ],
      defaultDate: null,
      showDialog: false,
      operation: 0,
      warehousingId: 0
    }
  },
  computed: {
    ...mapGetters(["drugTypes"]),
  },
  created() {
    this.$store.dispatch("GetInfo").then(res => {
      this.query.pharmacyId = res.pharmacyId;
      this.crud.toQuery();
    });
  },
  methods: {
    onImport() {
      downloadTermDrug(this.query);
    },
    onChangeNo({row, value}) {
      let data = {
        id: row.id,
        batchNo: value,
        termOfValidity: row.termOfValidity
      }
      this._undateTermDrug(data, row);
    },
    onChangeTerm({row, value}) {
      let data = {
        id: row.id,
        batchNo: row.batchNo,
        termOfValidity: value
      }
      this._undateTermDrug(data, row);
    },
    _undateTermDrug(data, row) {
      update(data).then(() => {
        this.crud.editSuccessNotify();
        row.batchNo = data.batchNo;
        row.termOfValidity = data.termOfValidity;
      });
    }
  }
}
</script>